<template>
    <div class="nomal inputSearch">
      <el-input
        size="mini"
        :placeholder="placeHolder"
        @keyup.native.enter="handlerClick"
        v-model.trim="nomalForm.query">
        <i
          class="el-input__icon el-icon-search"
          slot="suffix"
          @click="handlerClick">
        </i>
      </el-input>
    </div>
</template>
<script>
    import { phoneFilterChats } from '@/utils/m7Utils'
    export default {
      name: 'InputSearch',
      props: {
        placeHolder: String,
        form: Object
      },
      data () {
        return {
          input: ''
        }
      },
      methods: {
        handlerClick () {
          this.$emit('quickSearch', phoneFilterChats(this.nomalForm.query))
        },
        handlerChange (inputText) {
          this.input = inputText
        }
//        focus () {
//          let pane = document.querySelectorAll('.advanced-search .toggle-btn')
//          if (pane && pane.length > 0) {
//            pane.forEach((item, index) => {
//              item.style.borderLeftColor = '#459ae9'
//            })
//          }
//        },
//        blur () {
//          let pane = document.querySelectorAll('.advanced-search .toggle-btn')
//          if (pane && pane.length > 0) {
//            pane.forEach((item, index) => {
//              item.style.borderLeftColor = '#dcdfe6'
//            })
//          }
//        }
      },
      computed: {
        nomalForm () {
          return this.form
        }
      }
    }
</script>
<style lang="stylus" scoped>
@import "../../../../assets/common"
.nomal
  margin 0 33px 0 10px
  flex 8
  .n-btn
    i
      font-size 18px
      color $c-border2
</style>
